<template>
	<div class="container">
		<el-card>
			<div slot="header">
				<!-- 面包屑 -->
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
				</el-breadcrumb>
			</div>

			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="粉丝列表" name="list">
					<el-row :gutter="15">
						<el-col :span="4" v-for="(item, i) in fansList" :key="i">
							<fan-view :data="item" @follow="following"/>
						</el-col>
					</el-row>

					<el-pagination
					  background
					  layout="prev, pager, next"
					  :total="total"
						:current-page="queryInfo.page"
						:page-size="queryInfo.per_page"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						>
					</el-pagination>
				</el-tab-pane>
				<el-tab-pane label="粉丝画像" name="chart">
					<chart />
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script>
	import fanView from './components/FanView.vue'
	import chart from './components/Chart.vue'
	import {
		// getFansList,
		getFansListLocal
	 } from '@/api/fan.js'
	export default {
		name: 'fansIndex',
		data () {
			return {
				// 当前活跃的 tabs
				activeName: 'list',
				// 数据查询对象
				queryInfo: {
					page: 1,
					per_page: 10
				},
				// 粉丝列表数据数组
				fansList: [],
				// 总条数
				total: 0
			}
		},
		created () {
			this._loadFansList()
		},
		methods: {
			// 加载粉丝列表
			_loadFansList () {
				// // 接口已失效
				// getFansList(this.queryInfo).then(({data : res}) => {
				// 	this.$message.success('获取粉丝列表成功！')
				// 	this.fansList = res.data.results
				// }).catch(err => {
				// 	this.$message.error('获取粉丝列表失败：' + err)
				// })

				// 本地模拟数据
				getFansListLocal(this.queryInfo).then(({ data: res }) => {
					this.$message.success('获取粉丝列表成功！')
					this.fansList = res[0].results
					this.total = res[0].total
				}).catch(err => {
					this.$message.error('获取粉丝列表失败：' + err)
				})
			},
			handleSizeChange (newSize) {
				this.queryInfo.per_page = newSize
				this._loadFansList()
			},
			handleCurrentChange (newPage) {
				this.queryInfo.page = newPage
				this._loadFansList()
			},
			// 关注
			following (data) {
				// ...
			}
		},
		components: {
			fanView,
			chart
		}
	}
</script>

<style scoped>

</style>
